<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let msg = "测试数据";
        // 1、页面装载完成后将msg数据渲染到H5标签和input输入框中，作为默认值展示
        // 2、监听input输出框的用户输入操作，并同步完成h5标签的更新和js msg 变量的更新
        // 3、添加按钮事件，当被点击时，以弹出框的方式提示最新的msg变量值
        window.onload = function(){
            let rootDom = document.querySelector("#app");
            let h5Dom = rootDom.querySelector("h5");
            let inputDom = rootDom.querySelector("input[type='text']");
            let btnDom = rootDom.querySelector("input[type='button']");

            h5Dom.innerHTML = msg;
            inputDom.value = msg;

            inputDom.addEventListener("input",function(){
                // console.log(this)
                h5Dom.innerHTML = this.value;
                msg = this.value;
            })
            btnDom.addEventListener("click",function(){
                alert(msg)
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <h1></h1>
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <input type="text">
        <br><br>
        <input type="button" value="弹框">
    </div>
</body>
</html>